import React, { Component } from 'react'
import { Table, Pagination, Spin } from 'antd';
import axios from 'axios'
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
class sjqq extends Component {
  state = {
    columns: [
      {
        title: '文章标题',
        dataIndex: 'title',
        align: 'center'
      },
      {
        title: '姓名',
        dataIndex: 'author',
        align: 'center'
      },
      {
        title: '点击次数',
        dataIndex: 'amount',
        align: 'center'
      },
      {
        title: '年龄',
        dataIndex: 'age',
        align: 'center'
      },
      {
        title: '时间',
        dataIndex: 'data',
        align: 'center'
      },
    ],
    data: [],
    total: 0,
    current: 1,
    pageSize: 10,
    loading: false,
  }

  //组件挂载完毕
  componentDidMount() {
    this.query()
  }

  render() {
    return (
      <div>
        <Spin size="large" tip="Loading..." spinning={this.state.loading}>
          <Table columns={this.state.columns} dataSource={this.state.data} rowKey="id" pagination={false} />
        </Spin>
        <Pagination defaultCurrent={this.state.current} defaultPageSize={this.state.pageSize} total={this.state.total} onChange={this.query} />
      </div>
    );
  }
  //后端加入响应头cors 解决跨域
  query = () => {
    this.setState({
      loading: true
    }, () => {
      console.log(this.state.loading)
    })
    axios.post('/api1/api/v1/articleList',{id:1}).then(res => {
      this.setState({
        data: res.data.data.list,
        total: res.data.data.total,
        loading: false
      }, () => {
        console.log(this.state.loading)
      })
    })
  }
}

export default sjqq;